<template>
  <view>
    <up-popup mode="right" :safeAreaInsetBottom="false" :customStyle="customStyle" :show="show" @close="close">
      <up-navbar title="个人头像" placeholder @leftClick="close">
      </up-navbar>
      <view class="avatar">
        <image :style="{ width: `${imgLength}px`, height: `${imgLength}px` }" :src="img_url" mode="aspectFill"></image>
      </view>
      <view class="btn">
        <view class="btn-item">
          <up-button @click="change" :customStyle="button" :hair-line='false' text="更换头像"></up-button>
        </view>
        <view class="btn-item">
          <up-button @click="save" :customStyle="button" :hair-line='false' text="保存图片"></up-button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script>
import base from "@/apis/cloud/base";
import { useUserStore } from "@/pinia-store/user.js";
import { SysUser } from '@/utils/sql/user.js';
import { mapStores } from 'pinia';
import { COMMON_API_BASE_URL } from '@/utils/request.js'
export default {
  data () {
    return {
      show: false,
      token: '',
      phone: '',
      img_url: '',
      customStyle: { position: 'relative', width: '100vw', height: '100vh' },
      button: {
        width: '380rpx',
        height: '72rpx',
      },
      imgLength: 0,
    }
  },
  computed: {
    ...mapStores(useUserStore)
  },
  mounted () {
    this.token = this.userStore.user.token;
    this.phone = this.userStore.user.phone;
    this.worker_id = this.userStore.user.worker_id;
    this.img_url = this.userStore.user.img_url;
  },
  methods: {
    close () {
      this.show = false;
    },
    open (value) {
      this.imgLength = value;
      this.show = true;
    },
    change () {
      const that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: (res) => {
          console.log(res)
          uni.uploadFile({
            url: `${COMMON_API_BASE_URL}/dist/interface/public/index.php/index/Index/upload_avatar`,
            filePath: res.tempFilePaths[0],
            name: 'fj',
            formData: {
              'token': that.token,
              'phone': that.phone
            },
            success: (uploadFileRes) => {
              const data = JSON.parse(uploadFileRes.data);
              const params = {
                img_url: data.data.url,
                worker_id: that.worker_id,
              }
              const timestamp = new Date().getTime();
              const newImageUrl = `${data.data.url}?t=${timestamp}`;
              base.update_avatar(params).then(up => {
                if (up.status == 1) {
                  // #ifdef APP-PLUS
                  SysUser.updateById(that.worker_id, 'img_url', data.data.url);
                  // #endif
                  const user = that.userStore.user;
                  user.img_url = newImageUrl;
                  that.userStore.setUser(user);
                  that.img_url = newImageUrl;
                  uni.showToast({
                    title: '头像更新成功',
                    icon: 'success'
                  });
                }else{
                  uni.showToast({
                    title: up.msg || '头像更新失败',
                    icon: 'none'
                  });
                }
              })
            },
            fail (upFail) {
              console.log(upFail)
            }
          });
        },
        fail: (err) => {
          console.log(err)
        }
      })
    },
    save () {

    },
  }
}
</script>

<style lang="scss">
.avatar {
  margin-top: 200rpx;
}

.btn {
  text-align: center;
  margin-top: 30rpx;

  &-item {
    box-sizing: border-box;
    margin-top: 24rpx;
  }
}
</style>
